import React from "react";
import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import vtkConeSource from "@kitware/vtk.js/Filters/Sources/ConeSource";
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
// import vtkImageData from "@kitware/vtk.js/Common/DataModel/ImageData";
// import vtkPolyData from "@kitware/vtk.js/Common/DataModel/PolyData";
import vtkRenderWindow from "@kitware/vtk.js/Rendering/Core/RenderWindow";
// @ts-ignore
import HttpDataAccessHelper from "@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper";
type CounterProps = {
  name: string;
};

type CounterState = {
  value: number;
  representation: number;
  coneResolution: number;
  // thisPointRenderer:any;
  fullScreenRenderer: vtkFullScreenRenderWindow;
};
//https://blog.csdn.net/qq_29311407/article/details/121567973
// const vtkContainerRef = React.useRef<HTMLDivElement>(null);
let thisPointRenderer: vtkRenderer;
let renderWindow: vtkRenderWindow;
// let activeCamera;
class AppLess extends React.Component<CounterProps, CounterState> {
  state: CounterState = {
    value: 0,
    representation: 2,
    coneResolution: 6,
    fullScreenRenderer: vtkFullScreenRenderWindow.newInstance(),
    // thisPointRenderer:null,
  };
  //  private vtkContainerRef:React.MutableRefObject<HTMLElement | null>=React.useRef<HTMLElement | null>(null)
  componentDidMount() {
    this.createViewer();
  }
  createViewer = () => {
   let container = document.createElement( 'div' );
    document.getElementById("vtkContainerRef")!.appendChild( container );

    // let container = document.getElementById("vtkContainerRef") as HTMLElement;
    debugger;
    
    // let bbb:HTMLElement=container as HTMLElement;
    const ttt = vtkFullScreenRenderWindow.newInstance({
      //@ts-ignore
      background: [255, 255, 0 ,0 ], // 可以设置透明背景并使用 css 定义 3D 内容后面的渐变背景
      container: container,
      containerStyle: {
        height: "100%",
        width: "100%",
        position: "absolute",
      },
    });
    //@ts-ignore
    ttt.addController(container);
    this.setState(
      {
        fullScreenRenderer: ttt,
      },
      () => {
        debugger;
        thisPointRenderer = this.state.fullScreenRenderer.getRenderer();
        renderWindow = this.state.fullScreenRenderer.getRenderWindow();
        renderWindow.getInteractor().setDesiredUpdateRate(15);
        // activeCamera = thisPointRenderer.getActiveCamera();
        const coneSource = vtkConeSource.newInstance({ height: 1.0 });
        const mapper = vtkMapper.newInstance();
        mapper.setInputConnection(coneSource.getOutputPort());
        const actor = vtkActor.newInstance();
        actor.setMapper(mapper);
        thisPointRenderer.addActor(actor);
        thisPointRenderer.resetCamera();
        renderWindow.render();
      }
    );
  };
   render() {
    // const { name } = this.props;
    // const { value } = this.state;

    return (
      <div   id="vtkContainerRef">
         <table
            style={{
              position: "absolute",
              zIndex: 20,
              top: "25px",
              left: "25px",
              background: "white",
              padding: "12px",
            }}
          >
            <tbody>
              <tr>
                <td>
                  <select
                    value={this.state.representation}
                    style={{ width: "80%" }}
                    // onInput={(ev) =>
                    //   setRepresentation(Number(ev.currentTarget.value))
                    // }
                  >
                    <option value="0">Points</option>
                    <option value="1">Wireframe</option>
                    <option value="2">Surface</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <input
                    type="range"
                    min="4"
                    max="80"
                    value={this.state.coneResolution}
                    // onChange={(ev) => setConeResolution(Number(ev.target.value))}
                  />
                </td>
              </tr>
            </tbody>
          </table>
      </div>
    );
  }
}
export default AppLess;
